import jexcel from "jspreadsheet-ce";
import jSuites from "jsuites";
import XLSX from "xlsx";
import moment from "moment";
import api from "@/api/apiServer";
let content = {};
const tableOption = {
  // toolbar: [
  //   // {
  //   //   type: "i",
  //   //   content: "undo",
  //   //   onclick: function() {
  //   //     table.undo();
  //   //   },
  //   // },
  //   // {
  //   //   type: "i",
  //   //   content: "redo",
  //   //   onclick: function() {
  //   //     table.redo();
  //   //   },
  //   // },
  //   {
  //     type: "select",
  //     title:"abc",
  //     k: "font-family",
  //     v: ["Arial", "Verdana"],
  //   },
  //   {
  //     type: "select",
  //     k: "font-size",
  //     v: [
  //       "9px",
  //       "10px",
  //       "11px",
  //       "12px",
  //       "13px",
  //       "14px",
  //       "15px",
  //       "16px",
  //       "17px",
  //       "18px",
  //       "19px",
  //       "20px",
  //     ],
  //   },
  //   // {
  //   //   type: "i",
  //   //   content: "format_align_left",
  //   //   k: "text-align",
  //   //   v: "left",
  //   // },
  //   // {
  //   //   type: "i",
  //   //   content: "format_align_center",
  //   //   k: "text-align",
  //   //   v: "center",
  //   // },
  //   // {
  //   //   type: "i",
  //   //   content: "format_align_right",
  //   //   k: "text-align",
  //   //   v: "right",
  //   // },
  //   // {
  //   //   type: "i",
  //   //   content: "format_bold",
  //   //   k: "font-weight",
  //   //   v: "bold",
  //   // },
  //   {
  //     type: "color",
  //     content: "format_color_text",
  //     k: "color",
  //   },
  //   {
  //     type: "color",
  //     content: "format_color_fill",
  //     k: "background-color",
  //   },
  //   {
  //     type: "i",
  //     title: "设置复选框",
  //     content: "check_box", //设置复选框
  //     onclick: function() {
  //       var rows = table.getSelectedRows().length;
  //       var selectRows = table.getSelectedRows();
  //       var cols = table.getSelectedColumns().length;
  //       var selectCols = table.getSelectedColumns();
  //       var i, j;
  //       //遍历选择的所有单元格
  //       for (i = 0; i < rows; i++) {
  //         for (j = 0; j < cols; j++) {
  //           var td =
  //             table.tbody.children[
  //               parseInt(selectRows[i].getAttribute("data-y"))
  //             ].children[selectCols[j] + 1];
  //           var cellName = jexcel.getColumnNameFromId([
  //             selectCols[j],
  //             parseInt(selectRows[i].getAttribute("data-y")),
  //           ]);
  //           //设置单元格内容为checkbox
  //           var input = document.createElement("input");
  //           input.type = "checkbox";
  //           input.id = "checkbox" + cellName;
  //           td.classList.add("checkbox");
  //           td.innerHTML = "";
  //           td.appendChild(input);
  //         }
  //       }
  //       td.addEventListener("click", function(e) {
  //         this.children[0].checked = !this.children[0].checked;
  //       });
  //     },
  //   },
  //   {
  //     type: "i",
  //     title: "年-月-日",
  //     content: "date_range", //设置日期
  //     onclick: function() {
  //       let td =
  //         table.tbody.children[~~table.selectedCell[1]].children[
  //           ~~table.selectedCell[0] + 1
  //         ];
  //       var info = td.getBoundingClientRect();
  //       var editor = document.createElement("div");
  //       editor.style.width = info.width + "px";
  //       editor.style.height = info.height - 2 + "px";
  //       editor.style.minHeight = info.height - 2 + "px";
  //       td.classList.add("editor");
  //       td.innerHTML = "";
  //       td.appendChild(editor);

  //       let input = document.createElement("input");
  //       td.innerHTML = "";
  //       td.append(input);

  //       // 初始化时间
  //       window.table.options.data[~~window.table.selectedContainer[1]][
  //         ~~window.table.selectedContainer[0]
  //       ] = moment().format("YYYY-MM-DD HH:mm:ss");

  //       jSuites.calendar(td.children[0], {
  //         format: "YYYY/MM/DD HH:MM:SS",
  //         time: true,
  //         today: true,
  //         months:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
  //         monthsFull:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
  //         weekdays:["日","一","二","三","四","五","六"],
  //         textReset:"重置",
  //         textDone:"完成",
  //         textUpdate:"更新",
  //         onchange: function(e, afterTime) {
  //           window.table.options.data[~~window.table.selectedContainer[1]][
  //             ~~window.table.selectedContainer[0]
  //           ] = afterTime;
  //         },
  //       });


  //     },
  //   },
  //   {
  //     type: "i",
  //     content: "content_copy",
  //     onclick: function() {
  //       var data = "";
  //       for (
  //         let j = ~~table.selectedContainer[1];
  //         j <= ~~table.selectedContainer[3];
  //         j++
  //       ) {
  //         for (
  //           let i = ~~table.selectedContainer[0];
  //           i <= ~~table.selectedContainer[2];
  //           i++
  //         ) {
  //           data += table.options.data[j][i] + ",";
  //         }
  //         data += "\r\n";
  //       }
  //       // Download element
  //       var blob = new Blob(["\uFEFF" + data], {
  //         type: "text/csv;charset=utf-8;",
  //       });

  //       // IE Compatibility
  //       if (window.navigator && window.navigator.msSaveOrOpenBlob) {
  //         window.navigator.msSaveOrOpenBlob(
  //           blob,
  //           this.options.csvFileName + ".csv"
  //         );
  //       } else {
  //         // Download element
  //         var pom = document.createElement("a");
  //         var url = URL.createObjectURL(blob);
  //         pom.href = url;
  //         pom.setAttribute("download", "选区execl.csv");
  //         document.body.appendChild(pom);
  //         pom.click();
  //         pom.parentNode.removeChild(pom);
  //       }
  //     },
  //   },
  //   {
  //     type: "i",
  //     title: "设置下拉框",
  //     content: "format_list_bulleted", //设置下拉框格式
  //     onclick: function() {
  //       content.scoop.$refs.DropDown.modalShow();
  //     },
  //   },
  //   // {
  //   //   type: "i",
  //   //   content: "ios_share",
  //   //   onclick: function() {
  //   //     let tableData = window.table.getJson();
  //   //     tableData.unshift(window.table.getHeaders());
  //   //     console.log(tableData);
  //   //     let tablesome = content.scoop.$refs.spreadsheet.children[2].children[0];
  //   //     console.log(tablesome[2]);
  //   //     let tb = XLSX.utils.table_to_sheet(tablesome);
  //   //     openDownloadDialog(sheet2blob(tb, "test"), "计划.xlsx");
  //   //     // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
  //   //     function sheet2blob(sheet, sheetName) {
  //   //       sheetName = sheetName || "sheet1";
  //   //       var workbook = {
  //   //         SheetNames: [sheetName],
  //   //         Sheets: {},
  //   //       };
  //   //       workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

  //   //       var wopts = {
  //   //         bookType: "xlsx", // 要生成的文件类型
  //   //         bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
  //   //         type: "binary",
  //   //       };
  //   //       var wbout = XLSX.write(workbook, wopts);
  //   //       var blob = new Blob([s2ab(wbout)], {
  //   //         type: "application/octet-stream",
  //   //       }); // 字符串转ArrayBuffer
  //   //       function s2ab(s) {
  //   //         var buf = new ArrayBuffer(s.length);
  //   //         var view = new Uint8Array(buf);
  //   //         for (var i = 0; i != s.length; ++i)
  //   //           view[i] = s.charCodeAt(i) & 0xff;
  //   //         return buf;
  //   //       }
  //   //       return blob;
  //   //     }

  //   //     function openDownloadDialog(url, saveName) {
  //   //       if (typeof url == "object" && url instanceof Blob) {
  //   //         url = URL.createObjectURL(url); // 创建blob地址
  //   //       }
  //   //       var aLink = document.createElement("a");
  //   //       aLink.href = url;
  //   //       aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  //   //       var event;
  //   //       if (window.MouseEvent) event = new MouseEvent("click");
  //   //       else {
  //   //         event = document.createEvent("MouseEvents");
  //   //         event.initMouseEvent(
  //   //           "click",
  //   //           true,
  //   //           false,
  //   //           window,
  //   //           0,
  //   //           0,
  //   //           0,
  //   //           0,
  //   //           0,
  //   //           false,
  //   //           false,
  //   //           false,
  //   //           false,
  //   //           0,
  //   //           null
  //   //         );
  //   //       }
  //   //       aLink.dispatchEvent(event);
  //   //     }
  //   //   },
  //   // },
  // ],
  data: [],
  // search: true,
  defaultColWidth: 100,
  lazyLoading: true,
  allowToolbar: false,
  minDimensions: [39, 20],
  tableOverflow: true,
  tableWidth: "100%",
  tableHeight: "550px",
  columns: [],
  rowResize: true,
  columnDrag: true,
  allowComments: true,
  updateTable: function (instance, cell, col, row, val, id) {
    if (col == 3&&row!=0) {
        if(val){
          cell.innerHTML = '<img src="' + val + '" style="width:100px;height:100px">';
        }
    }
},
  //右键菜单中文化
  text: {
    addImage: "添加图片",
    insertANewColumnBefore: "在前方插入列",
    insertANewColumnAfter: "在后方插入列",
    renameThisColumn: "重命名此列",
    deleteSelectedColumns: "删除选择列",
    insertANewRowBefore: "在上方方插入行",
    insertANewRowAfter: "在下方插入行",
    deleteSelectedRows: "删除选择行",
    orderAscending: "升序排列",
    orderDescending: "降序排列",
    saveAs: "保存",
    addComments: "添加备注",
    editComments: "编辑备注",
    clearComments: "删除备注",
    mergeCell: "合并单元格",
    cancelMergeCell: "取消合并",
    showingPage: "第 {0} 页 总共 {1} 页数据",
    search: "搜索",
    invalidMergeProperties:"无效合并",
    cellAlreadyMerged:"单元格已经合并过"
  },
  contextMenu: function(obj, x, y, e) {
    var items = [];
    //只限定在第三列添加图片
    if(x=="3"){
      //插入图片
      items.push({
        title: obj.options.text.addImage,
        onclick: function() {
          // content.scoop.$refs.UploadImage.modalShow();  
          content.scoop.uploadImage();  
        },
      });
    }
    
    if (y == null) {
      // // Insert a new column
      // if (obj.options.allowInsertColumn == true) {
      //   items.push({
      //     title: obj.options.text.insertANewColumnBefore,
      //     onclick: function() {
      //       obj.insertColumn(1, parseInt(x), 1);
      //     },
      //   });
      // }

      // if (obj.options.allowInsertColumn == true) {
      //   items.push({
      //     title: obj.options.text.insertANewColumnAfter,
      //     onclick: function() {
      //       obj.insertColumn(1, parseInt(x), 0);
      //     },
      //   });
      // }

      // // Delete a column
      // if (obj.options.allowDeleteColumn == true) {
      //   items.push({
      //     title: obj.options.text.deleteSelectedColumns,
      //     onclick: function() {
      //       obj.deleteColumn(
      //         obj.getSelectedColumns().length ? undefined : parseInt(x)
      //       );
      //     },
      //   });
      // }

      // // Rename column
      // if (obj.options.allowRenameColumn == true) {
      //   items.push({
      //     title: obj.options.text.renameThisColumn,
      //     onclick: function() {
      //       obj.setHeader(x);
      //     },
      //   });
      // }

      // Sorting
      if (obj.options.columnSorting == true) {
        // Line
        // items.push({ type: "line" });

        items.push({
          title: obj.options.text.orderAscending,
          onclick: function() {
            obj.orderBy(x, 0);
          },
        });
        items.push({
          title: obj.options.text.orderDescending,
          onclick: function() {
            obj.orderBy(x, 1);
          },
        });
      }
    } else {
      // 插入新行
      if (obj.options.allowInsertRow == true) {
        items.push({
          title: obj.options.text.insertANewRowBefore,
          onclick: function() {
            obj.insertRow(1, parseInt(y), 1);
          },
        });

        items.push({
          title: obj.options.text.insertANewRowAfter,
          onclick: function() {
            obj.insertRow(1, parseInt(y));
          },
        });
      }

      //合并单元格
      items.push({
        title: obj.options.text.mergeCell,
        onclick: function() {
          var ColName = jexcel.getColumnNameFromId(
            obj.selectedCell.slice(0, 2)
          );
          var mergeX = obj.selectedCell[2] - obj.selectedCell[0] + 1;
          var mergeY = obj.selectedCell[3] - obj.selectedCell[1] + 1;
          obj.setMerge(ColName, mergeX, mergeY);
        },
      });

      //取消合并单元格
      items.push({
        title: obj.options.text.cancelMergeCell,
        onclick: function() {
          var ColName = jexcel.getColumnNameFromId(
            obj.selectedCell.slice(0, 2)
          );
          obj.removeMerge(ColName);
        },
      });

      if (obj.options.allowDeleteRow == true) {
        items.push({
          title: obj.options.text.deleteSelectedRows,
          onclick: function() {
            obj.deleteRow(
              obj.getSelectedRows().length ? undefined : parseInt(y)
            );
          },
        });
      }

      if (x) {
        if (obj.options.allowComments == true) {
          items.push({ type: "line" });

          var title = obj.records[y][x].getAttribute("title") || "";

          items.push({
            title: title
              ? obj.options.text.editComments
              : obj.options.text.addComments,
            onclick: function() {
              obj.setComments([x, y], prompt(obj.options.text.comments, title));
            },
          });

          if (title) {
            items.push({
              title: obj.options.text.clearComments,
              onclick: function() {
                obj.setComments([x, y], "");
              },
            });
          }
        }
      }
    }
    // 分割线
    items.push({ type: "line" });
    // 保存
    if (obj.options.allowExport) {
      items.push({
        title: obj.options.text.saveAs,
        shortcut: "Ctrl + S",
        onclick: function() {
          obj.download();
        },
      });
    }
    return items;
  },
};
export { tableOption, content };
